<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"></page-meta>

  <view class="page-container">
    <customHeader :title="headerTitle" />

    <view :class="['score-container', activeModal === 'scoreEvaluation' ? 'fBg' : 'minorBg']" :style="{ top: height }">
      <scoreFinish v-if="activeModal === 'scoreFinish'" />

      <scoreEvaluation v-else-if="activeModal === 'scoreEvaluation'" ref="evaluationRef" @init="handleModalInit" />

      <scoreEvaluation v-else-if="activeModal === 'scoreFreeTalkEvaluation'" page-type="freeTalk" ref="evaluationRef" @init="handleModalInit" />

      <scoreOverall v-else-if="activeModal === 'scoreOverall'" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { rootFontSize } from "@/utils/util";
import customHeader from "@/components/customHeader.vue";
import scoreFinish from "./scoreFinish.vue";
import scoreEvaluation from "./scoreEvaluation.vue";
import scoreOverall from "./scoreOverall.vue";
import { onLoad } from "@dcloudio/uni-app";

const scoreEvaDetail = ref(null);
const activeModal = ref("");
const evaluationRef = ref(null);
const height = ref(getApp().globalData!.pageTop);
const sectionId = ref("");
const headerTitle = ref("小结");

onLoad(async (option: any) => {
  if (option.headerTitle) {
    headerTitle.value = option.headerTitle;
  }
  sectionId.value = option.section_id;
  scoreEvaDetail.value = option.data && JSON.parse(decodeURIComponent(option.data));
  activeModal.value = option.activeModal || "scoreOverall";
})

const handleModalInit = () => {
  if (activeModal.value === "scoreEvaluation" || activeModal.value == "scoreFreeTalkEvaluation") {
    (evaluationRef.value as any).handleInit(scoreEvaDetail.value, sectionId.value);
  }
}
</script>

<style scoped lang="scss">
.page-container {
  width: 100vw;
  height: 100vh;

  .score-container {
    position: absolute;
    width: 37.5rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
  }
}

.minorBg {
  background-color: $uni-bg-color-minor;
}

.fBg {
  background-color: #ffffff;
}
</style>
